<app-toolbar>
    <app-search-form placeholder="请输入名称"
        (onSearch)="search($event)"></app-search-form>
    <app-batch-btn 
        uploadApi="/api/plugin/import"
        downloadApi="/api/plugin/export"
        [showDelBtn]="false"
        (add)="handleEdit()"
    ></app-batch-btn>
</app-toolbar>

<div nz-row [nzGutter]="16" class="card">
    <div nz-col *ngFor="let item of datum" class="card-item" (click)="informate(item)">
        <app-card [img]="'plugin.png'" [id]="item.id" [name]="item.name" [title]="'插件'"></app-card>
    </div>
</div>

<!-- <ng-template #totalTemplate let-total>总共 {{ total }} 条</ng-template>
<nz-table
    #basicTable
    [nzData]="datum"
    [nzLoading]="loading"
    nzShowPagination
    nzShowSizeChanger
    [nzFrontPagination]="false"
    [nzTotal]="total"
    [nzShowTotal]="totalTemplate"
    (nzPageSizeChange)="pageSizeChange($event)"
    (nzPageIndexChange)="pageIndexChange($event)"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"
    (nzQueryParams)="onQuery($event)"
>
    <thead>
    <tr>
        <th
            [nzChecked]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="handleAllChecked($event)"
        ></th>
        <th nzColumnKey="id" [nzSortFn]="true">ID</th>
        <th nzColumnKey="name">名称</th>
        <th nzColumnKey="username">用户名</th>
        <th nzColumnKey="password">密码</th>
        <th nzColumnKey="external">外置</th>
        <th nzColumnKey="version">版本</th>
        <th nzColumnKey="command">命令</th>
        <th nzColumnKey="disable">状态</th>
        <th nzColumnKey="created" [nzSortFn]="true">日期</th>
        <th [nzWidth]="'300px'">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index">
        <td
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="handleItemChecked(data.id, $event)"
        ></td>
        <td>{{ data.id }}</td>
        <td>{{ data.name }}</td>
        <td>{{ data.username }}</td>
        <td>{{ data.password }}</td>
        <td>{{ data.external }}</td>
        <td>{{ data.version }}</td>
        <td>{{ data.command }}</td>
        <td>
            <nz-tag nzColor="success" *ngIf="data.running"> 启动</nz-tag>
            <nz-tag nzColor="error" *ngIf="!data.running"> 停止</nz-tag>
        </td>
        <td>{{ data.created | date }}</td>
        <td>
            <a (click)="handleEdit(data.id)">
                <i nz-icon nzType="edit"></i>
            </a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-popconfirm
               nzPopconfirmTitle="确定删除?"
               (nzOnConfirm)="delete(data.id)"
               (nzOnCancel)="cancel()"
               nzPopconfirmPlacement="topLeft">
                <i nz-icon nzType="delete"></i>
            </a>
            <nz-divider nzType="vertical"></nz-divider>
            <a *ngIf="!data.running" (click)="plugin(0, data.id)"> 启动 </a>
            <a *ngIf="data.running" (click)="plugin(1, data.id)"> 停止 </a>
        </td>
    </tr>
    </tbody>
</nz-table> -->

<app-detail [isVisible]="isVisible" [title]="'插件'" [chooseData]="chooseData" (edit)="handleEdit($event)" (delete)="delete($event)" (close)="close()"></app-detail>

<nz-pagination style="position: fixed;  bottom: 0; right: 10px ; " [nzPageIndex]="pageIndex" [nzTotal]="total" nzShowSizeChanger [nzPageSize]="pageSize" (nzPageSizeChange)="pageSizeChange($event)" (nzPageIndexChange)="pageIndexChange($event)"></nz-pagination>
